<template>
    <div>
        <h1>{{ person.name }}</h1>
        <p>{{ person.hobbies }}</p>
        <button @click="updateMessage">Click Me</button>
        <button @click="showAlert">Show Alert</button>
        <button @click="changeName('John Doe')">Change Name</button>
        <button @click="increaseAge">Increase Age</button>
        <button @click="diagleData">alert</button>
        
    </div>
</template>

<script setup lang="ts" name="PersonRef">
    //  用来创建响应式的函数， 用于创建一个响应式的引用对象，通常用来包装基本类型（如数字、字符串、布尔值等），使其具有响应性
    import { reactive, toRefs, toRef } from 'vue';

    let person = reactive({
        name: 'Jhon Doe',
        age: 30,
        isMarried: false,
        hobbies: ['reading', 'sports', 'music'],
    });

    let {
        name,
        age,
        isMarried,
        hobbies,
    } = toRefs(person); //  将响应式对象转换为普通响应式对象，方便在模板中使用


    let nl = toRef(person, 'age'); 


    //  reactive(for object) 和 ref(for basic type) 都是响应式的 
    function updateMessage() {
        name.value = 'Jane Doe';
        hobbies.value.push('cooking');
        console.log(person);
    }

    function showAlert() {
        alert(`Name: ${name.value}, Age: ${age.value}, Is Married: ${isMarried.value}, Hobbies: ${hobbies.value.join(', ')}`);
    }
    function changeName(newName: string) {
        name.value = newName;
    }   
    function increaseAge() {
        age.value += 1;
    }
    function diagleData() {
        alert(`Name: ${name.value}, Age: ${age.value}, Is Married: ${isMarried.value}, Hobbies: ${hobbies.value.join(', ')}`);
    }
</script>

<style scoped>
h1 {
    color: #42b983;
}
button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
button:hover {
    background-color: #369870;
}
</style>